<script lang="ts" setup>
import Menus from '@/layouts/basic/Menus.vue'
import LanguageSwitch from '@/components/LanguageSwitch.vue'
import CurrencySwitch from '@/components/CurrencySwitch.vue'
import { HomeOutlined, DownOutlined, MenuOutlined } from '@ant-design/icons-vue'
import { translateRouteTitle } from '@/libs/utils/RouteTitle'

const drawerVisible = ref(false)
</script>

<script lang="ts">
import { Modal } from 'ant-design-vue'
export default {
	name: 'Layouts_basic_Index',

	mounted() {
		this.setBreadcrumbItems()
	},
	watch: {
		'$i18n.locale'() {
			this.setBreadcrumbItems()
		},
		$route() {
			this.setBreadcrumbItems()
		}
	},
	data() {
		return {
			jwtToken: useTokenStore(),
			adminer: useAdminerStore(),
			breadcrumbItems: []
		}
	},
	methods: {
		logout() {
			const that = this
			Modal.confirm({
				title: that.$t('退出登录'),
				content: that.$t('确定要退出登录吗？'),
				onOk() {
					that.jwtToken.updateToken()
					that.adminer.updateAdminer()
					that.$router.push({ path: '/login' })
				}
			})
		},
		setBreadcrumbItems() {
			this.breadcrumbItems = []
			const bPathes = []
			this.$route.matched.forEach(route => {
				if (route.meta.isMenu) {
					const item = {
						title: translateRouteTitle(route.meta.title),
						path: route.components || route.redirect ? route.path : false
					}
					this.breadcrumbItems.push(item)
					bPathes.push(route.path)
				}
			})
			if (!this.$_.includes(bPathes, this.$route.path)) {
				this.breadcrumbItems.push({
					title: translateRouteTitle(this.$route.meta.title),
					path: false
				})
			}
		}
	}
}
</script>

<template>
	<a-layout has-sider class="layout-basic">
		<a-layout-sider
			collapsible
			class="layout-sider overflow-auto [scrollbar-color:#666_#000] h-screen fixed left-0 top-0 bottom-0 hidden md:block"
			:trigger="null"
			:breakpoint="'md'"
			:collapsed-width="0">
			<div class="flex flex-col h-full">
				<a-image
					src="https://www.lzdls.com/xcxApi/guest/pub/gd?w=200&h=48"
					:preview="false"
					:height="64"
					:width="200" />
				<div class="flex-1 overflow-auto">
					<KeepAlive include="Menus">
						<Menus />
					</KeepAlive>
				</div>
			</div>
		</a-layout-sider>
		<a-layout class="layout-right bg-[#e8e8e8] min-h-[100vh]">
			<a-layout-header
				class="layout-right-header bg-[#fffcf9] px-[16px] fixed top-0 right-0 w-full md:w-[calc(100%-200px)] z-[999] shadow-[0_1px_6px_rgba(0,0,0,0.12),0_1px_4px_rgba(0,0,0,0.06)]">
				<a-button class="md:hidden mr-2" type="text" @click="drawerVisible = true">
					<menu-outlined />
				</a-button>
				<a-breadcrumb class="hidden md:inline-block">
					<a-breadcrumb-item>
						<home-outlined />
					</a-breadcrumb-item>
					<a-breadcrumb-item v-for="(item, key) in breadcrumbItems" :key="key">
						<a v-if="item.path" @click="$router.push(item.path)">
							<span>{{ item.title }}</span>
						</a>
						<span v-else>{{ item.title }}</span>
					</a-breadcrumb-item>
				</a-breadcrumb>
				<div class="float-right flex items-center gap-2">
					<CurrencySwitch />
					<LanguageSwitch />
					<a-dropdown :trigger="['click']">
						<a class="ant-dropdown-link" @click.prevent>
							{{ adminer.getAdminer.mobile }}
							<DownOutlined />
						</a>
						<template v-slot:overlay>
							<a-menu>
								<a-menu-item @click="logout">{{ $t('登录.退出登录') }}</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
			</a-layout-header>
			<a-layout-content
				class="mt-[82px] mx-2 bg-white overflow-initial p-4 md:p-24px md:mx-16px md:ml-216px"
				:class="
					$route.meta.hasFooterToolbar
						? 'mb-[86px] md:min-h-[calc(100vh-152px)]'
						: 'mb-4 md:min-h-[calc(100vh-82px)]'
				">
				<slot />
			</a-layout-content>
		</a-layout>
	</a-layout>
	<a-drawer
		placement="left"
		:visible="drawerVisible"
		@close="drawerVisible = false"
		:width="200"
		:body-style="{ padding: 0 }">
		<a-image
			class="hidden md:block"
			src="https://www.lzdls.com/xcxApi/guest/pub/gd?w=200&h=48"
			:preview="false"
			:width="200" />
		<Menus />
	</a-drawer>
</template>

<style scoped>
/* 覆盖ant-design-vue默认样式 */
.ant-layout-sider {
	position: fixed;
}
.ant-layout-header {
	background: #efefef;
	padding: 0 16px;
}
</style>
